<template>
  <div class="content2">
    <div style="width: 100%">
      <div class="row">
        <div class="lCol">
          <van-image
            round
            width="1rem"
            height="1rem"
            :src="
              forumList.account.img.anonymousFilePath
                ? getUrl(forumList.account.img.anonymousFilePath)
                : ''
            "
          />
        </div>
        <div class="rCol">
          <div>
            <span>{{ forumList.account.nickname }}</span>
            <van-tag round color="#efefef" text-color="#c0c0c0" class="ml2"
              >楼主</van-tag
            >
          </div>
          <div class="mt2">
            <span>{{ forumList.createdTime }}</span>
            <span>发布</span>
          </div>
        </div>
      </div>
      <div class="infoBox">
        <div class="infoTitle" v-html="htmlDecode(forumList.content)">
          
        </div>
        <div class="iconRow">
          <div class="iconCol">
            <div><van-icon name="eye" size="0.4rem" /></div>
            <div>{{ forumList.displayOrder }}</div>
          </div>
          <div class="iconCol">
            <div><van-icon name="chat" size="0.4rem" @click="showChatPopView()"/></div>
            <div>{{ forumList.commentCount }}</div>
            <van-popup :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="showChatPop"  position="bottom" :style="{ height: '112px',padding:'10px' }" > 
              <div style="display:flex">
                 <van-field autosize rows="2" type="textarea" v-model="chatinfos" :placeholder="hintText" style="flex:1"
                   class="chatInput" >
                 </van-field>  
              <div style="display:flex;flex-direction:column;">
                <div style="display:flex;justify-content:center ">
                  <van-icon name="arrow-down" size="20px"  @click="showChatPop=false"/>
                </div>
              <van-checkbox v-model="anonymous" style="margin:5px">是否实名</van-checkbox>
              <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
                @click="tosubmint(anonymous,chatinfos,forumList.id,commentTypeInfo1.id,'评论')">提交</van-button>
              </div>
              </div>
            </van-popup>
          </div>
          <div
            class="iconCol"
            :class="forumList.isSupport ? 'colorOrange' : ''"
          >
            <div @click="giveLike(forumList)">
              <van-icon name="good-job" size="0.4rem" />
            </div>
            <div>{{ forumList.supportVO.isSupport }}</div>
          </div>
          <div class="iconCol" :class="forumList.isOppose ? 'colorOrange' : ''">
            <div @click="stepOn(forumList)">
              <van-icon
                name="good-job"
                size="0.4rem"
                style="transform: rotate(180deg)"
              />
            </div>
            <div>{{ forumList.supportVO.isOppose }}</div>
          </div>
        </div>
        <!-- 评论模块 -->
        <div class="commentList">
          <div
            v-for="(commentItem, commentIndex) in commentList"
            :key="commentIndex"
          >
            <!-- 一级评论 -->
            <div class="commentRow" >
              <div class="lText" @click="show1ChatPopView()">
                <span class="colorOrange">{{ commentItem.nickname }}：</span>
                <span
                  class="commentContent"
                  v-html="htmlDecode(commentItem.content)"
                ></span>
              </div>
              <van-popup  :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="show1ChatPop"  position="bottom" :style="{ height: '112px',padding:'10px' }" > 
                <div style="display:flex">
                  <van-field autosize rows="2" type="textarea" v-model="chat1infos" :placeholder="hintText" style="flex:1"
                    class="chatInput" >
                  </van-field>  
                <div style="display:flex;flex-direction:column;">
                  <div style="display:flex;justify-content:center ">
                    <van-icon name="arrow-down" size="20px"  @click="show1ChatPop=false"/>
                  </div>
                <van-checkbox v-model="anonymous" style="margin:5px">是否实名</van-checkbox>
                <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
                  @click="tosubmint2(anonymous,chat1infos,commentItem.id,commentItem.id,commentItem.creator,commentTypeInfo2.id,'回复')">提交</van-button>
                </div>
                </div>
              </van-popup>
              <div class="rIcon" :class="commentItem.isSupport ? 'colorOrange' : ''">
                <div @click="giveCommentLike(commentItem)">
                  <van-icon
                    name="good-job-o"
                    size="0.4rem"
                  />
                </div>
                <div>{{ commentItem.supportVO.isSupport }}</div>
              </div>
            </div>
             
            <!-- 二级评论 -->
            <div v-if="commentItem.children.length > 0">
              <div
                class="commentRow"
                v-for="(childItem, childIndex) in commentItem.children"
                :key="childIndex"
              >
                <div class="lText" @click="show2ChatPopView()">
                  <span class="colorOrange">{{ childItem.nickname }}</span>
                  <span v-if="childItem.typeName == '评论'">：</span>
                  <span v-if="childItem.typeName == '回复'">回复</span>
                  <span class="colorOrange" v-if="childItem.typeName == '回复'"
                    >{{ childItem.fromTo }}：</span
                  >
                  <span
                    class="commentContent"
                    v-html="htmlDecode(childItem.content)"
                  ></span>
                </div>
                <van-popup :overlay-style="{background:'rgba(255,255,255,0)'}" v-model="show2ChatPop"  position="bottom" :style="{ height: '112px',padding:'10px' }" > 
                  <div style="display:flex">
                    <van-field autosize rows="2" type="textarea" v-model="chat2infos" :placeholder="hintText" style="flex:1"
                      class="chatInput" >
                    </van-field>  
                  <div style="display:flex;flex-direction:column;">
                    <div style="display:flex;justify-content:center ">
                      <van-icon name="arrow-down" size="20px"  @click="show2ChatPop=false"/>
                    </div>
                  <van-checkbox v-model="anonymous" style="margin:5px">是否实名</van-checkbox>
                  <van-button type="primary" size="small" color="#F06F3F" style="margin:5px" 
                    @click="tosubmint2(anonymous,chat2infos,childItem.id,childItem.rootId,childItem.creator,commentTypeInfo2.id,'回复')">提交</van-button>
                  </div>
                  </div>
                </van-popup>
                <div class="rIcon" :class="childItem.isSupport ? 'colorOrange' : ''">
                  <div @click="giveCommentLike(childItem)">
                    <van-icon
                      name="good-job-o"
                      size="0.4rem"
                    />
                  </div>
                  <div>{{ childItem.supportVO.isSupport }}</div>
                </div>
              </div>
            </div>
             
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { Notify } from "vant";
import {
  findById,
  findContentComment,
  queryByType,
  supportCreate,
  deleteSupport,
  displayOrderUpdate,
  create,
} from "@/api/colorfulLifeList.js";
import { openFileUrl } from '@/store/openFile'
export default {
  name: "colorfulLifeDetail",
  data() {
    return {
      forumList: {},
      commentList: [],
      itemId: "", //话题id
      commentTypeInfo1: {}, //评论类型信息(内容)
      commentTypeInfo2: {}, //评论类型信息(回复)
      supportTypeInfo1: {}, //点赞类型信息(内容)
      supportTypeInfo2: {}, //点赞类型信息(评论)
      showChatPop:false,
      hintText:'',
      chatinfos:'',
      anonymous:false,
      chat1infos:'',
      show1ChatPop:false,
      chat2infos:'',
      show2ChatPop:false,
    };
  },
  // watch: {
  //   $route(to, from) {
  //     this.categoryId = to.query.categoryId;
  //     this.topicId = to.query.topicId;
  //     this.onLoad();
  //   },
  // },
  computed: {
    ...mapGetters(["user"]),
  },
  activated() {
    this.itemId = this.$route.query.itemId;
    this.getAllForumList();
    this.getContentCommentList();
    this.getCommentTypeInfo();
    this.getSupportTypeInfo();
  },
  methods: {
    getUrl(value) {
        console.log('图片地址是:'+openFileUrl(value))
        return openFileUrl(value)
      },
    //获取话题信息
    getAllForumList() {
      this.forumList = {};
      this.commentList = [];
      var params = {
        userName: this.user.userName,
        id: this.itemId,
      };
      findById(params).then((res) => {
        this.forumList = res.data.data;
        this.updateDisplayOrder(res.data.data.displayOrder);
      });
    },
    //获取话题下评论信息
    getContentCommentList() {
      var params = {
        userName: this.user.userName,
        id: this.itemId,
      };
      findContentComment(params).then((res) => {
        this.commentList = res.data.data.content;
      });
    },
    //阅读量加一
    updateDisplayOrder(displayOrder) {
      var params = {
        userName: this.user.userName,
        id: this.itemId,
        displayOrder: displayOrder,
      };
      displayOrderUpdate(params).then((res) => {
        // this.forumList = res.data.data;
      });
    },
    //获取评论类型信息
    getCommentTypeInfo() {
      var params = {
        userName: this.user.userName,
        dictType: "COMMENT_TYPE",
      };
      queryByType(params).then((res) => {
        var commentTypeInfo = res.data.data;
        for (var i = 0; i < commentTypeInfo.length; i++) {
          if (commentTypeInfo[i].value == "评论") {
            this.commentTypeInfo1 = commentTypeInfo[i];
          } else if (commentTypeInfo[i].value == "回复") {
            this.commentTypeInfo2 = commentTypeInfo[i];
          }
        }
      });
    },
    //获取点赞类型信息
    getSupportTypeInfo() {
      var params = {
        userName: this.user.userName,
        dictType: "SUPPORT_TYPE",
      };
      queryByType(params).then((res) => {
        var supportTypeInfo = res.data.data;
        for (var i = 0; i < supportTypeInfo.length; i++) {
          if (supportTypeInfo[i].value == "content") {
            this.supportTypeInfo1 = supportTypeInfo[i];
          } else if (supportTypeInfo[i].value == "comment") {
            this.supportTypeInfo2 = supportTypeInfo[i];
          }
        }
      });
    },
    //创建或删除点赞
    giveLike(item) {
      if (item.isSupport) {
        this.removeContentSupport(item, 0);
      } else {
        if (item.isOppose) {
          Notify({ type: "warning", message: "点踩后不可点赞！" });
        } else {
          this.createContentSupport(item, 0);
        }
      }
    },
    //创建或删除点踩
    stepOn(item) {
      if (item.isOppose) {
        this.removeContentSupport(item, 1);
      } else {
        if (item.isSupport) {
          Notify({ type: "warning", message: "点赞后不可点踩！" });
        } else {
          this.createContentSupport(item, 1);
        }
      }
    },
    //创建或删除评论的点赞
    giveCommentLike(item) {
      if (item.isSupport) {
        this.removeCommentSupport(item, 0);
      } else {
        this.createCommentSupport(item, 0);
      }
    },
    //创建点赞或点踩
    createContentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        typeId: this.supportTypeInfo1.id, //点赞类型id
        typeName: this.supportTypeInfo1.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      supportCreate(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "点赞成功！";
            item.isSupport = true;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) + 1;
          } else {
            title = "点踩成功！";
            item.isOppose = true;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) + 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //删除点赞或点踩
    removeContentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        // typeId: this.supportTypeInfo1.id, //点赞类型id
        // typeName: this.supportTypeInfo1.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      deleteSupport(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "取消点赞成功！";
            item.isSupport = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          } else {
            title = "取消点踩成功！";
            item.isOppose = false;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) - 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //创建评论点赞
    createCommentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        typeId: this.supportTypeInfo2.id, //点赞类型id
        typeName: this.supportTypeInfo2.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      supportCreate(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "点赞成功！";
            item.isSupport = true;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) + 1;
          } else {
            title = "点踩成功！";
            item.isOppose = true;
            item.supportVO.isOppose = parseInt(item.supportVO.isOppose) + 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //删除评论点赞
    removeCommentSupport(item, type) {
      var params = {
        userName: this.user.userName,
        toContent: item.id, //点赞的内容或评论id
        // typeId: this.supportTypeInfo2.id, //点赞类型id
        // typeName: this.supportTypeInfo2.name, //点赞类型名称
        isOppose: type, //0：点赞，1：点踩
      };
      deleteSupport(params).then((res) => {
        if (res.errcode == 200) {
          var title = "";
          if (type == 0) {
            title = "取消点赞成功！";
            item.isSupport = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          } else {
            title = "取消点踩成功！";
            item.isOppose = false;
            item.supportVO.isSupport = parseInt(item.supportVO.isSupport) - 1;
          }
          Notify({ type: "success", message: title });
        }
      });
    },
    //处理转义字符
    htmlDecode(str) {
      var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
      return str.replace(/&(lt|gt|nbsp|amp|quot);/gi, function (all, t) {
        return arrEntities[t];
      });
    },
    showChatPopView(){
      this.showChatPop=true;
      this.chatinfos=''
      this.anonymous=false
      this.show1ChatPop=false;
      this.chat1infos=''
      this.show2ChatPop=false;
      this.chat2infos=''
    },
    show1ChatPopView(){
      this.show1ChatPop=true;
      this.chat1infos=''
      this.anonymous=false
      this.showChatPop=false;
      this.chatinfos=''
      this.show2ChatPop=false;
      this.chat2infos=''
    },
    show2ChatPopView(){
      this.show2ChatPop=true;
      this.chat2infos=''
      this.anonymous=false
      this.showChatPop=false;
      this.chatinfos=''
      this.show1ChatPop=false;
      this.chat1infos=''
    },
      // @click="tosubmint(anonymous,chatinfos,forumList.id,this.commentTypeInfo1,'评论')
    tosubmint(anonymous,content,parentId,typeId,typeName){
      var params = {
        userName: this.user.userName,
        appDecision: {
          anonymous:!anonymous,
          content:content,
          parentId:parentId,
          typeId:typeId,
          typeName:typeName
        },
      };
      create(params).then((res) => {
        Notify({type:'success', message:'评论成功'})
        this.showChatPop=false;
        this.chatinfos=''
        this.anonymous=false
        this.getContentCommentList();
        this.getAllForumList();
      });
    },
    //  @click="tosubmint2(anonymous,chat2infos,childItem.id,childItem.rootId,childItem.creator,this.commentTypeInfo2,'回复')
    tosubmint2(anonymous,content,parentId,rootId,toName,typeId,typeName){
      var params = {
        userName: this.user.userName,
        appDecision: {
          anonymous:!anonymous,
          content:content,
          parentId:parentId,
          rootId:rootId,
          toName:toName,
          typeId:typeId,
          typeName:typeName
        },
      };
      create(params).then((res) => {
        Notify({type:'success', message:'回复成功'})
        this.show2ChatPop=false;
        this.chat2infos=''
        this.show1ChatPop=false;
        this.chat1infos=''
        this.anonymous=false
        this.getContentCommentList();
        this.getAllForumList();
      });
    }
  },
};
</script>
<style>
.content2 {
  width: 100%;
  height: 100%;
  font-size: 14px;
  overflow-y: auto;
}
.row {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.25rem 0.25rem 0.25rem;
}
.lCol {
  width: 1.4rem;
}
.rCol {
  widows: calc(100% - 1.4rem);
  color: #aaaaaa;
}
.infoBox {
  padding: 0 0.35rem;
  padding-bottom: 36px;
}
.infoBox .infoTitle {
  line-height: 0.55rem;
  font-weight: normal !important;
  font-size: 14px !important;
  font-family: none !important;
}
.infoBox .infoTitle strong ,
.infoBox .infoTitle h1,
.infoBox .infoTitle h2, 
.infoBox .infoTitle h3, 
.infoBox .infoTitle h4, 
.infoBox .infoTitle h5, 
.infoBox .infoTitle h6 ,
.infoBox .infoTitle b ,
.infoBox .infoTitle span{
  font-weight: normal !important;
  font-size: 14px !important;
  font-family: none !important;
}
.iconRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #aaaaaa;
  margin-top: 0.1rem;
}
.iconRow .iconCol {
  display: flex;
  align-items: center;
}
.moreBtn {
  margin: 0.25rem 0;
}
.commentList {
  margin-top: 10px;
}
.commentRow {
  display: flex;
  align-items: center;
  color: #aaaaaa;
  justify-content: space-between;
  line-height: 0.55rem;
}
.commentRow .lText {
  /* display: inline-flex;
  align-items: start; */
  word-break: break-all;
}
.commentRow .rIcon {
  display: flex;
  align-items: center;
  text-align: left;
}
/* .commentContent {
  word-break: break-all;
  display: inline-flex;
  align-items: center;
} */
.ml2 {
  margin-left: 0.2rem;
}
.mt2 {
  margin-top: 0.12rem;
}
.colorOrange {
  color: #f76e20;
}
</style>